/* slide in from the right */
@keyframes slideInRight {
  from  { transform:translateX(100%); }
  to    { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
  from  { -moz-transform:translateX(100%); }
  to    { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
  from  { -webkit-transform:translateX(100%); }
  to    { -webkit-transform: translateX(0); }
}

@keyframes slideInLeft {
  from  { transform:translateX(-100%); }
  to    { transform: translateX(0); }
}
@-moz-keyframes slideInLeft {
  from  { -moz-transform:translateX(-100%); }
  to    { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInLeft {
  from  { -webkit-transform:translateX(-100%); }
  to    { -webkit-transform: translateX(0); }
}
/* slide in from the bottom */
@keyframes slideInUp {
  from  { transform:translateY(100%); }
  to    { transform: translateY(0); }
}
@-moz-keyframes slideInUp {
  from  { -moz-transform:translateY(100%); }
  to    { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
  from  { -webkit-transform:translateY(100%); }
  to    { -webkit-transform: translateY(0); }
}
  
  /* slide in from the bottom */
@keyframes slideOutLeft {
from  { -webkit-transform:translateX(0); }
  to    { transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {  
from  { -webkit-transform:translateX(0); }
  to    { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
from  { -webkit-transform:translateX(0); }
  to    { -webkit-transform: translateX(-100%); }
}

@keyframes slideOutRight {
  from  { -webkit-transform:translateX(0); }
  to    { transform: translateX(-100%); }
}
@-moz-keyframes slideOutRight {
  from  { -webkit-transform:translateX(0); }
  to    { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutRight {
from  { -webkit-transform:translateX(0); }
  to    { -webkit-transform: translateX(-100%); }
}
/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
  to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
  to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
  to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
.animateENTER,.animateLEAVE{
  position:absolute;width:100%;
}


.animateENTER.ng-enter{ -webkit-animation: slideInRight 0.3s both ease-in;}
.animateLEAVE.ng-enter-active{ -webkit-animation: slideInLeft 0.3s both ease-in;}
.animateENTER.ng-leave{ -webkit-animation: slideOutLeft 0.3s both ease-in;}
.animateLEAVE.ng-leave-active{ -webkit-animation: slideOutRight 0.3s both ease-in;}
